<template>
  <div class="address">
    <div>
      <span>收获地址</span>
      <el-divider></el-divider>
    </div>

    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="地址信息">
        <el-cascader
        size="large"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" >
        <el-input v-model="form.address" ></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.name" ></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item>
    <el-button type="primary" @click="onSubmit">新建</el-button>
    <el-button @click="cancel">取消</el-button>
  </el-form-item>
    </el-form>


    <!-- 这是地址页面的表格 -->
    <div class="num">
      <span>已保存了 {{ num }} 条地址</span>
      <el-divider></el-divider>
    </div>

    <el-table
    :data="tableData"
    stripe
    border
    style="width: 100%">
    <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
    <el-table-column
      prop="name"
      label="名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="电话"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
import { regionData, codeToText } from "element-china-area-data";
export default {
  components: {},
  props: {},
  data() {
    return {
      form: {
        name: "",
        address: "",
        phone:''
      },
      options: regionData,
      selectedOptions: [],
      addtions: {}, //存储地址数据
      num:'12',
      tableData: [],
      userInfo:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}
      
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 新建按钮
    onSubmit() {
      console.log("submit!");
      console.log(this.form)
      // let a = this.addtions.names.replaceAll('/','')
      let b = this.form.address
    
      this.request.post('/address',{
        name: this.form.name,
        address: this.addtions.names + b,
        phone:this.form.phone,
        uid:this.userInfo.id
      }).then(res=>{
        console.log(res)
        if(res.data.code === "200"){
          this.$message.success("恭喜小主，又多了一个牵挂的地方！")
          this.form = {};
          this.addtions = {}
        }
      })
    },
    // 取消按钮
    cancel(){
      // 这是地区编码
      this.selectedOptions = {};
      this.form = {}
      console.log(this.addtions)
    },
    // 编辑按钮
    handleEdit(index, row){
      console.log(index,row)
      // console.log()
     
      this.addtions.name = row.address
      this.form.address = row.address
      this.form.name = row.name
      this.form.phone = row.phone
      // if(row.address){

      // }
    },
    // 删除按钮
    handleDelete(index,row){

      console.log(index)
            
      this.$confirm('小主！您的操作将永久删除该地址, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.request.delete('/address/'+row.id).then(res=>{
            if(res.data.code ==="200"){
              this.$message.success("已听从您的指示！为您净化空间啦！")
              this.load()
             }
   })
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '还好还好！可以挽回！已为您取消删除该地址'
          });
        });

    },
    
    handleChange(value) {
      //我们选择地址后，selectedOptions 会保存对应的区域码，例如北京的区域码为'110000'
      //我们要取出区域码对应的汉字，就需要用CodeToText(区域码)进行输出
      this.addtions.selectedOptions = value;
      var name = "";
      this.selectedOptions.map((item) => (name += codeToText[item]));
      this.addtions.names = name;
      console.log(this.addtions.names);
      console.log(this.addtions);
    },
    // 页面初始化
    load(){
    //   this.request.get("/address/page",{
    //     params:{
    //       pageNum:this.pageNum,
    //       pageSize:this.pageSize,
    //       address:this.address,
    //       uid:this.userInfo.id

    //     }
    //   }).then((res) => {
    //   console.log(res);
    //   this.tableData = res.data.data;
    //   console.log(res.data.data);
    // });

    this.request.get("/address").then(res => {
      this.tableData = res.data.data;
      })
    }
  },
  created() {
  this.load()
  },
  mounted() {},
};
</script>
<style scoped>
.el-input {
    width: 60%;
}
.el-cascader {
    width: 30%;
}
.num {
    padding-top:30px;
}
</style>